<template>
  <div class="child">
    <h1>我是子组件</h1>
    <div>儿子的玩具：{{ toy }}</div>
    <button>玩具给父亲</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import emitter from '@/utils/emitter.ts';
const toy = ref('奥特曼')

onMounted(() => {
  setTimeout(() => {
    emitter.emit('send-toy', toy.value)
  }, 3000)
})

</script>

<style scoped>
.child {
  border: 1px solid black;
  background-color: rgb(231, 170, 96);
  border-radius: 10px;
  padding: 10px;
}
</style>